<template>
<div class="">
  <criteria partial='criteria' @show-con = "pocon" v-ref:cri>
  <div class= "form-horizontal" partial>
    <div class="col-sm-11" >
      <label for="f_area" class="col-sm-2 control-label">区:</label>
      <div class="col-sm-2">
       <input type="text" class="form-control" v-model="model.f_area"  condition="t.f_area like '%{}%'" placeholder="区"/>
      </div>
      <label for="f_slice_area" class="col-sm-2 control-label">片区/管理站:</label>
      <div class="col-sm-2">
       <input type="text" class="form-control" v-model="model.f_slice_area"  condition="t.f_slice_area like '%{}%'" placeholder="片区/管理站"/>
      </div>
      <label for="f_adjustable_name" class="col-sm-2 control-label">调压箱:</label>
      <div class="col-sm-2 ">
        <v-select id="f_adjustable_name"
          v-model="model.f_adjustable_name"
          placeholder='请选择'
          condition="a.f_adjustable_name ='{}'"
          :value.sync="model.f_adjustable_name"
          :options='$parent.boxname'
          close-on-select clear-button>
        </v-select>
      </div>
    </div>
    <div class="col-sm-11"  style="margin-top:10px;">

      <label for="f_street" class="col-sm-2 control-label">街道:</label>
      <div class="col-sm-2">
       <input type="text" class="form-control" v-model="model.f_street"  condition="t.f_street ='{}'" placeholder="街道"/>
      </div>
      <label for="" class="control-label  col-sm-2">小区:</label>
      <div class="col-sm-2">
        <input type="text" class="form-control" v-model="model.f_residential_area" condition="t.f_residential_area like '%{}%'"  placeholder="小区"  @keyup.enter="$parent.queryData()"/>
      </div>
      <label for="f_building" class="col-sm-2 control-label">证件类型:</label>
      <div class="col-sm-2 ">
        <v-select id="f_credentials"
          v-model="model.f_credentials"
          placeholder='请选择'
          condition="t.f_credentials ='{}'"
          :value.sync="model.f_credentials"
          :options='$parent.credentials'
          close-on-select clear-button>
        </v-select>
      </div>
    </div>
    <div class="col-sm-11"  style="margin-top:10px;">
      <label for="f_unit" class="col-sm-2 control-label">单元:</label>
      <div class="col-sm-2">
       <input type="text" class="form-control" v-model="model.f_unit" condition="t.f_unit ='{}'"  placeholder="单元"/>
      </div>
      <label for="f_building" class="col-sm-2 control-label">楼号:</label>
      <div class="col-sm-2">
       <input type="text" class="form-control" v-model="model.f_building"  condition="t.f_building ='{}'" placeholder="楼号"/>
      </div>
      <label for="f_floor" class="col-sm-2 control-label">楼层:</label>
      <div class="col-sm-2">
       <input type="text" class="form-control" v-model="model.f_floor"  condition="t.f_floor ='{}'" placeholder="楼层"/>
      </div>
    </div>
    <div class="col-sm-11"  style="margin-top:10px;">
      <label for="f_room" class="col-sm-2 control-label">门牌号:</label>
      <div class="col-sm-2">
       <input type="text" class="form-control" v-model="model.f_room"  condition="t.f_room ='{}'" placeholder="门牌号"/>
      </div>
    </div>
 </div>
</criteria>
</div>
</template>
<script>
import AppData from '../../../../../stores/AppData'
export default {
  data () {
    return {
      arr: [],
      condition: ''
    }
  },
  methods: {
    reset () {
      this.$refs.cri.model.f_slice_area = ''
      this.$refs.cri.model.f_residential_area = ''
      this.$refs.cri.model.f_area = ''
      this.$refs.cri.model.f_street = ''
      this.$refs.cri.model.f_unit = ''
      this.$refs.cri.model.f_building = ''
      this.$refs.cri.model.f_floor = ''
      this.$refs.cri.model.f_room = ''
      this.$refs.cri.model.f_credentials = ''
      this.$refs.cri.model.f_adjustable_name = ''
    },
    // 向数组添加 页面上要显示的条件内容
    pocon () {
      let model = this.$refs.cri.model
      this.arr = []
      this.addElement(model.f_slice_area, '片区/管理站', 'f_slice_area')
      this.addSelectElement(model.f_credentials, '证件类型', 'f_credentials')
      this.addSelectElement(model.f_adjustable_name, '调压箱', 'f_adjustable_name')
      this.addElement(model.f_area, '区', 'f_area')
      this.addElement(model.f_street, '街道', 'f_street')
      this.addElement(model.f_residential_area, '小区', 'f_residential_area')
      this.addElement(model.f_unit, '单元', 'f_unit')
      this.addElement(model.f_building, '楼号', 'f_building')
      this.addElement(model.f_floor, '楼层', 'f_floor')
      this.addElement(model.f_room, '门牌号', 'f_room')
      // if (model.f_slice_area && model.f_slice_area !== '') {
      //   this.arr.push({content: `电话:${model.f_slice_area}`, culmn: 'f_slice_area'})
      // }
      // if (model.f_gasproperties && model.f_gasproperties.length > 0 && model.f_gasproperties[0] !== '') {
      //   this.arr.push({content: `用气性质:${model.f_gasproperties}`, culmn: 'f_gasproperties'})
      // }
      // if (model.f_credentials && model.f_credentials.length > 0 && model.f_credentials[0] !== '') {
      //   this.arr.push({content: `证件类型:${model.f_credentials}`, culmn: 'f_credentials'})
      // }
      // if (model.f_area && model.f_area !== '') {
      //   this.arr.push({content: `区:${model.f_area}`, culmn: 'f_area'})
      // }
      // if (model.f_street && model.f_street !== '') {
      //   this.arr.push({content: `街道:${model.f_street}`, culmn: 'f_street'})
      // }
      // if (model.f_residential_area && model.f_residential_area !== '') {
      //   this.arr.push({content: `小区:${model.f_residential_area}`, culmn: 'f_residential_area'})
      // }
      // if (model.f_unit && model.f_unit !== '') {
      //   this.arr.push({content: `单元:${model.f_unit}`, culmn: 'f_unit'})
      // }
      // if (model.f_building && model.f_building !== '') {
      //   this.arr.push({content: `楼号:${model.f_building}`, culmn: 'f_building'})
      // }
      // if (model.f_floor && model.f_floor !== '') {
      //   this.arr.push({content: `楼层:${model.f_floor}`, culmn: 'f_floor'})
      // }
      // if (model.f_room && model.f_room !== '') {
      //   this.arr.push({content: `门牌号:${model.f_room}`, culmn: 'f_room'})
      // }
      // if (model.f_operator && model.f_operator !== '') {
      //   this.arr.push({content: `建档人:${model.f_operator}`, culmn: 'f_operator'})
      // }

      // 将组织好的数据发送给父组件
      this.$dispatch('showcond', this.arr)
    },
    addElement (value, chineseColumn, englishColumn) {
      if (value && value !== '') {
        this.arr.push({content: `${chineseColumn}:${value}`, culmn: englishColumn})
      }
    },
    addSelectElement (value, chineseColumn, englishColumn) {
      if (value && value.length > 0 && value[0] !== '') {
        this.arr.push({content: `${chineseColumn}:${value}`, culmn: englishColumn})
      }
    },
    // 当页面上显示的某一数组元素被删除时，同时删除对应的条件
    sort () {
      for (let key in this.$refs.cri.model) {
        let num = 0
        for (let index in this.arr) {
          if (this.arr[index].culmn !== key) {
            num++
          }
        }
        if (num === (this.arr.length)) {
          this.$refs.cri.model[key] = ''
        }
      }
    }
  },
  watch: {
    'arr': {
      deep: true,
      handler (val) {
        // 当数组某一项删除时 重新整理数据并发送给父组件
        this.sort()
        this.$refs.cri.search()
      }
    }
  },
  computed: {
    credentials () {
      return [{label: '全部', value: ''}, ...AppData.getParam('证件类型')]
    },
    gasproperties () {
      return [{label: '全部', value: ''}, ...AppData.getParam('用气性质')]
    },
    boxname () {
      let arr = []
      AppData.getAdjustable().forEach((item) => {
        let temp = {}
        temp.label = item.label
        temp.value = item.value.f_adjustable_name
        arr.push(temp)
      })
      return [{label: '全部', value: ''}, ...arr]
    }
  }
}
</script>
